<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.css" />
		<link type="text/css" rel="stylesheet" href="../css/duihuanjilu.css" />
		<link type="text/css" rel="stylesheet" href="../css/iconfont.css" />
		<link type="text/css" rel="stylesheet" href="../css/mui.picker.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/mui.dtpicker.css">
		<title>积分记录</title>
	</head>
	<body>
		<header style="background: #005aab;" class="mui-bar mui-bar-nav head">
			<span class="mui-icon mui-icon-back"></span>
			<h1 style="color: #FFFFFF; letter-spacing: 4px;" class="mui-title">积分记录</h1>
			<span class="mui-icon mui-icon-more"></span>
		</header>
		<div class="mui-content">
			<div class="all_contains">
				<div class="selects">
					<button class="btns" id="set1" onclick="timerpick()">按年份查看</button>
					<button class="btns" id="set2" onclick="jidupick()">按季度查看</button>
				</div>
				<table>
					<tr>
						<th style="border-right:1px solid #666666;">内容</th>
						<th style="border-right:1px solid #666666;">积分</th>
						<th style="border-right:1px solid #666666;">时间</th>
						<th style="border-right:1px solid #666666;">季度</th>
						<th>备注</th>
					</tr>
					<tr>
						<td class="border_td">100元容平卡</td>
						<td class="border_td">-100</td>
						<td class="border_td">2017.01.23</td>
						<td class="border_td">er</td>
						<td>已发</td>
					</tr>
					<tr>
						<td class="border_td">100元容平卡</td>
						<td class="border_td">-100</td>
						<td class="border_td">2017.01.23</td>
						<td class="border_td">一</td>
						<td>已发</td>
					</tr>
					<tr>
						<td class="border_td">100元容平卡</td>
						<td class="border_td">-100</td>
						<td class="border_td">2017.01.23</td>
						<td class="border_td">一</td>
						<td>已发</td>
					</tr>
					<tr>
						<td class="border_td">100元容平卡</td>
						<td class="border_td">-100</td>
						<td class="border_td">2017.01.23</td>
						<td class="border_td">一</td>
						<td>已发</td>
					</tr>
					<tr>
						<td class="border_td">100元容平卡</td>
						<td class="border_td">-100</td>
						<td class="border_td">2017.01.23</td>
						<td class="border_td">一</td>
						<td>已发</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/mui.picker.min.js"></script>
	<script src="../js/mui.dtpicker.js"></script>
	<script>
		mui.init();
		function timerpick(){
    		var pickers = new mui.DtPicker({
    			//选择类型，默认datetime(年月日时分);
    			"type":"date",
    			//日期范围始；
    			"beginYear":2000,
    			//日期范围终；
    			"endYear":2099
    		});
			pickers.show(function(rs) {
				alert(rs.text)
			})
    	}
		function jidupick(){
			var picker = new mui.PopPicker({
			    layer: 1
			});
			picker.setData([
				{
					value:"查看全部",
					text:"查看全部"
				},{
					value:"第一季度",
					text:"一"
				},{
					value:"第二季度",
					text:"二"
				},{
					value:"第三季度",
					text:"三"
				},{
					value:"第四季度",
					text:"四"
				}
			])
			picker.show(function(item) {
				alert(item[0].text)
			})
		}
	</script>
</html>
